<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模板</title>

  </head>
  <body>
    <div id="app">
      <!-- 调用全局组件 -->
      <app-head></app-head>
      <!-- 调用局部组件 -->
      <app-main></app-main>
      <app-foot></app-foot>
      <!-- <headsss></headsss> -->
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    /*
        vue的组件注册：
            * 全局注册：可以用在所有实例里面
                Vue.component('组件名',{})
                    * 参数一：组件名：推荐中划线写法
                    * 参数二：{} 实际上，就是一个vue实例
                        * 一个组件就是一个实例对象,但是不需要手动实例化
                        * vue里面有的属性，组件都有：data watch computed components filters directives methods template(没有el)
                        * data必须要写成函数的形式，在里面返回一个对象(面试题)
            * 局部注册：只能用在自己的实例里面
                new Vue({
                    components:{
                        '组件名' : {},
                        '组件名' : {}
                    }
                })
      */

    //全局组件注册
    Vue.component("app-head", {
      // Vue.component("appHead", {//组件名可以是单个单词： head(不推荐单个单词的写法，因为很容易和系统标签名重复) ;中划线 app-head(官方推荐); 驼峰命名:appHead
      // Vue.component("headsss", {
      //组件名可以是单个单词： head ;中划线 app-head; 驼峰命名:appHead
      //   name: "myhead",
      template: '<h1 @click="show">{{ msg }}</h1>',
      data: function () {
        return {
          msg: "这是一个头部组件",
        };
      },
      methods: {
        show() {
          alert("点我了");
        },
      },
    });

    //实例化vue的时候就自动生成根组件root；data是一个对象
    new Vue({
      el: "#app",
      data: {},

      //局部组件注册
      components: {
        "app-main": {
          template: "<h1>{{ msg }}</h1>",
          data() {
            return {
              msg: "这个是中部组件",
            };
          },
        },
        "app-foot": {
          template: "<h1>{{ msg }}</h1>",
          data() {
            return {
              msg: "这个是底部组件",
            };
          },
        },
      },
    });
  </script>
</html>

